<template>
	<view class="page">
		<navbar backIconName="arrow-left" title="节点告知" :titleStyle="titleStyle"></navbar>
		<scroll-view class="scroll-view_H" :style="{height: 'calc(100vh - 68px)'}" scroll-y="true">
			<view :style="{height:statusHeight+'px'}"></view>

			<view class="inCompany-task">
				<view class="task-item">
					<view class="left">
						<view class="top">
							<text style="font-size: 28rpx;color: #1169DB;font-weight: bold;">节点告知内容</text>
						</view>
						<u-line></u-line>
						<u--form ref="uForm2" labelPosition="left" :model="formData3" :rules="rules3" labelWidth="90"
							:labelStyle="labelStyle">
							<u-form-item label="告知内容" prop="feedbackComment" borderBottom>
								<u--textarea v-model="formData3.feedbackComment" :showConfirmBar="false"
									:adjustPosition="true" placeholder="请输入告知内容"></u--textarea>
							</u-form-item>
							<u-form-item label="附件">
								<view
									style="font-size: 26rpx; display: flex;align-items: center;justify-content: space-between;">
									<text style="font-size: 22rpx;">最多支持5个文件，最大2M</text>
									<text class="custom-button" @click="selectFileFeedBack">新增附件</text>
								</view>
							</u-form-item>
							<view class="file-content">
								<view class="item" v-for="(item,index) in fileListFeedBack" :key="index">
									<text>{{item.name}}</text>
									<u-icon name="close" @click="delFeedBack(item,index)"></u-icon>
								</view>
							</view>


						</u--form>

					</view>

				</view>

			</view>



		</scroll-view>
		<view style="height: 44px;display: flex;align-items: center;margin: 0px 20rpx;">
			<u-button type="primary" :throttleTime="1000" text="提交" @click="submitFeedback"></u-button>
		</view>

		<!-- loading -->
		<u-overlay :show="showLoading" :opacity="0.8">
			<view class="warp">
				<text style="font-size: 28rpx;color: #fff;">{{loadingTips}}</text>
			</view>
		</u-overlay>


	</view>
</template>

<script>
	import {
		oneKeyFeedBack,
		enterFeedback,
	} from '@/api/pagesMine'
	import {
		getDict,
	} from "@/api/login.js"
	import {
		getTimeStamp,
		showConfirm,
		getSimpleDate,
	} from "@/utils/common.js"
	let App = getApp();
	import store from '@/store'
	import config from '@/api/config'
	export default {
		components: {},
		data() {
			return {
				showLoading: false,
				loadingTips: '加载中...',
				statusHeight: 44 + App.globalData.statusBarHeight,
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				labelStyle: {
					color: "#323232",
					fontWeight: "bold",
					fontSize: "28rpx"
				},
				formData3: {
					feedbackComment: "",
				},
				rules3: {
					feedbackComment: [{
						required: true,
						message: '请输入告知内容',
						trigger: ['blur']
					}],

				},
				userId: store.state.user.USER_OPENID,
				userInfo: store.state.user.USER_INFO,
				enterpriseTaskNo: '',
				showMyd: false,
				showGfd: false,
				actionsGfd: [],
				actionsMyd: [],
				fileListTips: false,
				feedbackTypeTips: false,
				feedbackMatterTips: false,
				remarksTips: false,
				actionsMydOrg: [],
				fileListFeedBack: [],
			};
		},
		onReady() {
			this.$refs.uForm2.setRules(this.rules3)
		},
		onLoad(options) {
			this.enterpriseTaskNo = options.enterpriseTaskNo
		},
		methods: {
			getTimeStamp,
			getSimpleDate,
			/* 选择入企反馈文件 */
			selectFileFeedBack() {
				if (this.fileListFeedBack.length >= 5) {
					return uni.$u.toast('最多支持选择5个文件')
				}
				let fileType = ['pdf', 'doc', 'xlsx', 'docx', 'xls']
				uni.chooseMessageFile({
					count: 1, //默认100
					type: 'file',
					extension: fileType,
					success: (res) => {
						console.log(res)
						if (res.tempFiles[0].size > 1024 * 1024 * 2) {
							return uni.$u.toast('文件大小不能超过2M')
						}
						if (this.fileListFeedBack.find(item => item.name === res.tempFiles[0].name) !=
							undefined) {
							return uni.$u.toast('存在重复附件')
						}
						this.loadingTips = "上传中..."
						this.showLoading = true
						uni.uploadFile({
							url: config.baseUrl + '/enterprise/upload/uploadFile',
							filePath: res.tempFiles[0].path,
							name: 'file',
							formData: {
								fileName: res.tempFiles[0].name,
								userId: this.userId,
							},
							success: (uploadFileRes) => {
								this.showLoading = false
								let result = JSON.parse(uploadFileRes.data)
								if (result.code == 200 && result.data) {
									this.fileListFeedBack.push({
										name: result.data.fileName,
										url: result.data.url
									})
								} else {
									return uni.$u.toast('上传失败，请重新上传')
								}
							},
							fail: (error) => {
								this.showLoading = false
								return uni.$u.toast('上传失败，请重新上传')
							}
						});


					}
				})
			},
			delFeedBack(row, index) {
				this.fileListFeedBack.splice(index, 1)
			},

			/* 提交jie'd */
			submitFeedback() {
				this.$refs.uForm2.validate().then(res => {
					let userid = store.state.user.USER_OPENID
					let params = {
						enterpriseTaskNo: this.enterpriseTaskNo,
						feedbackComment: this.formData3.feedbackComment,
						attachmentDtoList: [],
						userId: userid
					}
					let fileList = this.fileListFeedBack.map(item => {
						return {
							fileName: item.name || '',
							fileUrl: item.url || '',
							type: '',
						}
					})
					params.attachmentDtoList = fileList
					console.log(params, '==================')
					showConfirm('确认要提交节点告知?').then(res => {
						if (res.confirm) {
							enterFeedback(params).then(res => {
								if (res.code == 200) {
									uni.$u.toast('告知成功！')
									setTimeout(() => {
										let pages = getCurrentPages();
										let prevPage = pages[pages.length - 2]; //上一个页面
										prevPage.$vm.getDetails(); //重点$vm
										uni.navigateBack();
									}, 500)
								}

							});
						}
					})

				}).catch(errors => {
					console.log(errors, '00000000000000000000')
				});
			},


		}
	};
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.file-content {
		.item {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 14rpx;
			border-radius: 8rpx;
			border: 1px solid #eee;
			margin-bottom: 10rpx;

			.txt {
				flex: 1;
				overflow: hidden;
				/*内容超出后隐藏*/
				text-overflow: ellipsis;
				/*超出内容显示为省略号*/
				white-space: nowrap;
				/*文本不进行换行*/
			}
		}
	}

	.custom-button {
		width: 160rpx;
		height: 54rpx;
		font-size: 24rpx;
		color: #fff;
		background: #3c9cff;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.scroll-view_H {
		width: 100%;
		height: 100%;

		.staff-card {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;

				.top {
					margin-bottom: 30rpx;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 24rpx;
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 6rpx;
						background-color: #4F79DC;
					}
				}
			}
		}

		.submit-content {
			padding: 30rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.other-staff {

			height: 80rpx;
			border: 1px dashed #1169DB;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #1169DB;
			font-weight: bold;
			margin: 0px 20rpx;
			border-radius: 6rpx;
		}

		.inCompany-task {
			display: flex;
			flex-direction: column;
			padding: 20rpx;


			.task-item {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 12rpx;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

				.left {
					width: 100%;
					display: flex;
					flex-direction: column;

					.top {
						display: flex;
						padding-bottom: 20rpx;

						.label-content {
							width: 110px;
							font-size: 28rpx;
							color: #323232;
							font-weight: bold;
						}
					}
				}
			}
		}



	}
</style>